import React, { memo, useEffect } from 'react'
import MainWrapper from '@/common/MainWrapper'
import { withRouter } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { getArticleByClassifyAction } from '@/store/blog/actionCreators'
import { Col, Row } from 'antd'
import CategoryList from '@/components/b_category_list'
import About from '@/components/b_about'

function B_Category(props) {
  const { userId } = props
  const { classifyId } = props.match.params
  const classify = decodeURI(props.location.search.split('=').pop())

  const dispatch = useDispatch()

  useEffect(() => {
    document.title = '分类'
    userId && dispatch(getArticleByClassifyAction(userId, classifyId))
  }, [dispatch, classifyId, userId])

  return (
    <MainWrapper>
      <Row>
        <Col
          lg={{ span: 12, offset: 3 }}
          md={{ span: 14, offset: 2 }}
          sm={{ span: 22, offset: 1 }}
          xs={{ span: 22, offset: 1 }}
        >
          <CategoryList classify={classify} />
        </Col>
        <Col
          lg={{ span: 5, offset: 1 }}
          md={{ span: 5, offset: 1 }}
          sm={{ span: 0 }}
          xs={{ span: 0 }}
        >
          <About />
        </Col>
      </Row>
    </MainWrapper>
  )
}

export default memo(withRouter(B_Category))
